<template>
  <div>
    <!-- 搜索框 -->
    <div class="search"  v-if="user.role !== 'USER'">
      <el-input
          size="mini"
          style="width: 200px; margin-right :10px; font-size:13px; "
          v-model="params.name"
          placeholder="请输入患者姓名查询"
      ></el-input>
      <el-button size="mini" type="info" @click="findBySearch()" plain>查询</el-button>
      <el-button size="mini" type="warning" @click="reset()" plain>重置</el-button>
    </div>

    <!-- 表格 -->
    <div class="search" style="margin-top: 10px; font-size:12px;">
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="patientName" label="患者姓名"></el-table-column>
        <el-table-column prop="doctorName" label="医生" show-overflow-tooltip></el-table-column>
        <el-table-column prop="appointmentTime" label="就诊时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="doctorAdvice" label="医嘱病历" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="checkInfo(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="inHospital" label="是否住院" :formatter="formatStatus"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="checkIn" label="是否住院登记" show-overflow-tooltip></el-table-column>
        <el-table-column width="150px" label="操作" v-if="user.role === 'DOCTOR'">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">填写医嘱</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--  编辑表单  -->
    <el-dialog title="医嘱登记表" :visible.sync="dialogFormVisibleUpdate">
      <el-form :model="updateForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="医嘱病历" prop="doctorAdvice">
          <el-input type="textarea" v-model="updateForm.doctorAdvice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否住院" prop="inHospital">
          <template>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div style="margin-top:10px; float: right">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  name: "PatientAttendanceView",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      params: {
        name: "",
        pageNum: 1,
        pageSize: 5
      },
      total: 0,
      tableData: [],
      dialogFormVisibleUpdate: false,
      updateForm: {},
      options: [{
        value: '1',
        label: '是'
      }, {
        value: '-1',
        label: '否'
      }],
      value: '-1'
    };
  },
  //生命周期钩子
  created() {
    //查询全部
    this.findBySearch();
  },
  methods: {
    // 条件查询
    findBySearch() {
      request.get("/PatientAttendance/findBySearch", {params: this.params}).then(res => {
        console.log(res)
        if (res.data && res.data.list) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.error(res.msg);
        }
      }).catch(error => {
        console.error("Error occurred while fetching data:", error);
      });
    },

    //重置
    reset() {
      this.params.name = "";
      this.findBySearch()
    },

    //查看医嘱
    checkInfo(index, row) {
      console.log(row)
      this.$alert(row.doctorAdvice, '医嘱', {
        confirmButtonText: '确定'
      })
    },

    //编辑按钮
    handleEdit(index, row) {
      this.dialogFormVisibleUpdate = true;
      console.log(row)
      this.updateForm.id = row.id;
      request.get("/PatientAttendance/findById", {params: {id: row.id}}).then(res => {
        console.log(res)
        this.updateForm = res.data;
        this.value = res.data.inHospital
      })
    },

    //发起编辑请求
    update() {
      this.updateForm.inHospital = this.value
      console.log(this.updateForm)
      request.get("/PatientAttendance/update", {params: this.updateForm}).then(res => {
        if (res.code == 200) {
          this.$message.success("医嘱填写成功!")
          this.dialogFormVisibleUpdate = false;
          this.findBySearch();
        } else {
          this.$message.error(res.msg);
        }
      })
    },

    // 状态文字转换函数
    formatStatus(row, column, cellValue) {
      if (cellValue === '-1') {
        return '否';
      } else if (cellValue === '1') {
        return '是';
      } else {
        return '';
      }
    },

    //分页
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.findBySearch();
    },

    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.findBySearch();
    },


  }
};
</script>
<style scoped>
.search {
  width: 100%;
  box-shadow: 1px 0 6px rgba(0, 21, 41, 0.25);
  border-radius: 5px;
  padding: 15px 0 15px 10px;
}
</style>
